<!--
 * @Author: lirl
 * @Date: 2019-11-15 11:22:55
 * @LastEditTime: 2022-08-08 16:31:28
 * @Description: file content
 -->
<template>
  <div class="not-found-page">
    <div class="not-found-container">
      <el-image :src="require('@/assets/images/404-images/404.png')" fit="fill"></el-image>
      <el-image class="png msg" :src="require('@/assets/images/404-images/404_msg.png')" fit="fill"></el-image>
      <div class="back">
        <a href="/">返回</a>
      </div>
    </div>
    <div class="cloud"></div>
  </div>
</template>
<style lang="scss" scoped>
.not-found-page {
  background: url('~@/assets/images/404-images/error_bg.jpg') repeat-x scroll 0 0 #67ace4;
  height: 100vh;
}
.not-found-container {
  margin: 0 auto;
  padding-top: 150px;
  text-align: center;
  width: 560px;
  img {
    border: medium none;
    margin-bottom: 50px;
  }
  .error {
    height: 200px;
    position: relative;
  }
  .error img {
    bottom: -50px;
    position: absolute;
    right: -50px;
  }
  .msg {
    margin-bottom: 65px;
  }
  .back {
    height: 80px;
    a {
      color: #fff;
      padding: 10px 20px;
      display: block;
      border: 1px solid #ccc;
      width: 140px;
      text-align: center;
      margin: 0px auto;
      text-decoration: none;
    }
  }
}
.cloud {
  background: url('~@/assets/images/404-images/error_cloud.png') repeat-x scroll 0 0 transparent;
  position: absolute;
  bottom: 0;
  height: 170px;
  width: 100%;
}
</style>
